<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="../skins/style/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../skins/style/bootstrap/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="../skins/style/font-awesome.min.css">

<script type="text/javascript" src="../skins/js/ui/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../skins/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="../skins/js/bootstrap/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../skins/js/bootstrap/bootstrap-table-zh-CN.min.js"></script>

<style type="text/css">
.fixed-table-pagination{border-bottom:none;}
.pull-right pagination{display:block;}
</style>
<title>CommonPage</title>
</head>
<body>
<script type="text/javascript">
$(document).ready( function () {
	$('#userTable').bootstrapTable({
		
		url:'http://localhost:8080/SpringTest/getAllUser',
		classes:'table table-striped table-bordered',
		pagination: true,                   //是否显示分页（*）
		toolbar: '#toolbar',                //工具按钮用哪个容器
		search          : true,                     // 搜索框  
		// singleSelect    : true,                     // 单选checkbox  
		dataField: "data",
		pageNumber:1,
		pageSize: 2,                       //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        //showColumns: true,                  //是否显示所有的列
        showRefresh:true,					//刷新按钮
        //minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: false,                //是否启用点击选中行
        //height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "id",                     //每一行的唯一标识，一般为主键列
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
       sidePagination:'server',
        paginationHAlign:'right',
        buttonsAlign:'right',					//按钮对齐方式
        toolbarAlign:'right',					//工具栏对齐方式
        locale:'zh-CN',							//中文支持,
		columns: [{
			field: 'id',
            radio: true,
            render:function(){
            	
            }
        }, {
            field: 'name',
            title: '姓名',
            align:'center',
            formatter:function(value,row,index){  
                var url = '<a href="#" mce_href="#" onclick="">' + value + '</a>   ';  
                return url;  
            }  
        }, {
            field: 'mobile',
            title: '电话',
            align:'center'
        }, {
            field: 'email',
            title: '邮箱',
            align:'center'
        }, {
            field: 'address',
            title: '地址',
            align:'center'
        }, ]
	});
} );
</script>
<p>欢迎欢迎</p>
<img src="../skins/images/logo.png" class="img-thumbnail">
 <div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
     <button id="btn_edit" type="button" class="btn btn-default" style="display: none; border-radius: 0">
         <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>
     </button>
      <button id="btn_delete" type="button" class="btn btn-default" style="display: none;">
          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
      </button>
      <button id="btn_add" type="button" class="btn btn-default">
          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
      </button>
 </div>
<table id="userTable" data-toggle="">
</table>
</body>
</html>